<template>
	<view class="container">
		<view class="head">
			<u-icon @click="returnButton()" name="arrow-left" color="#fff" size="30"></u-icon>
			<u-text text="核销操作" color="#fff" size="22" align="center" margin="4vh 0px 0px 0px"></u-text>
		</view>
		<view class="content">
			<u-text text="核销码 MC1234-5678-9012" size="20" align="center"></u-text>
			<view class="hr"></view>
			<u-text text="服务内容" size="20" line-height="100rpx"></u-text>
			<u-text text="xxx标准洗车服务包含" size="16" lineHeight="50rpx"></u-text>
			<u-text text="整车泡沫冲洗擦" size="16" lineHeight="50rpx"></u-text>
			<u-text text="轮胎轮毂冲洗清洁" size="16" lineHeight="50rpx"></u-text>
			<u-text text="车内吸尘" size="16" lineHeight="50rpx"></u-text>
			<u-text text="内饰脚垫简单除尘" size="16" lineHeight="50rpx"></u-text>
			<u-text text="(不包含虫户,水泥,沥青和顽固物资清理等)" size="16" lineHeight="50rpx"></u-text>
			<view class="hr"></view>
			<u-text text="订单信息" size="20" line-height="100rpx"></u-text>
			<u-text text="订单价格:￥30.00" size="16" lineHeight="50rpx"></u-text>
			<u-text text="实付金额:￥30.00" size="16" lineHeight="50rpx"></u-text>
			<u-text text="优惠金额:￥30.00" size="16" lineHeight="50rpx"></u-text>
			<u-text text="订单编号 2020032554565799" size="16" lineHeight="50rpx"></u-text>
			<u-text text="支付时间 2020.03.30 14:40:45" size="16" lineHeight="50rpx"></u-text>
			<u-text text="预约时间 2020.03.30 14:40:00" size="16" lineHeight="50rpx"></u-text>
		</view>
		<view class="bottom" :style="{ backgroundColor: bgColor}">

			<u-text @click="show=true" :text="btnText" color="#fff" size="18" align="center" line-height="6vh"></u-text>
		</view>
		<!-- 确认核销弹窗 -->
		<u-modal :show="show" title="核销此订单" showCancelButton @cancel="show=false" @confirm="confirm()">
			<view class="slot-content">
				<rich-text :nodes="content"></rich-text>
			</view>
		</u-modal>

	</view>
</template>

<script>
	export default {
		data() {
			return {
				show: false,
				content: `请您仔细核对订单,此操作不可撤销<br> 请谨慎操作`,
				btnText: '确认核销',
				'bgColor': '#0662E6',


			}
		},
		methods: {
			confirm() {
				this.bgColor = '#808080';
				this.btnText = '已核销';
				this.show = false;
			},
			returnButton() {
				uni.$u.route('/pages/ls/scanCodeVerification/scanCodeVerification');
			}
		}
	}
</script>

<style lang="scss">
	page {
		overflow: hidden;
	}

	.slot-content {
		text-align: center;
	}

	.container {
		height: 100vh;
	}

	.head {
		background-color: #3183FB;
		width: 100%;
		height: 250px;
		overflow: auto;

		.u-icon {
			position: fixed;
			top: 4vh;
		}
	}

	.content {
		box-sizing: border-box;
		padding: 30rpx 25rpx;
		background-color: white;
		width: 90vw;
		height: 76vh;
		margin: 0 auto;
		transform: translateY(-25vh);
		box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1), 0 6px 20px rgba(0, 0, 0, 0.1);
		border-radius: 16rpx;

		.hr {
			margin-top: 30rpx;
			border: 2px solid #f3f3f3;
			border-radius: 2px;
		}
	}

	.bottom {
		height: 6vh;
		width: 70vw;
		margin: 0 auto;
		transform: translateY(-22vh);
		left: 15vw;
		border-radius: 60rpx;
		overflow: auto;
	}
</style>